<template>
    <div class="musicList">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="MusicContent">
            <van-swipe 
                :loop="false" 
                :width="150" 
                class="my-swiper" 
                :show-indicators="false"
            >
                <van-swipe-item v-for="item in state.musicList" :key="item">
                    <router-link :to="{path:'/itemMusic',query:{id:item.id}}">
                        <img :src="item.picUrl" alt="">
                        <span class="playCount">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            {{changeCount(item.playCount)}}
                        </span>
                        <span class="name">{{item.name}}</span>
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script>
    import {getMusicList} from '@/request/api/home.js'
    import {reactive,onMounted} from 'vue'
    export default{
        // 使用vue2获取数据
        //#region 
        /* data(){
            return {
                musicList:[]
            }
        },
        methods:{
            async getGeDan(){
                let res=await getMusicList()
                console.log(res)
                this.musicList=res.data.result
            },
            changeCount:function(num){
                if(num>=100000000){
                    return  (num/10000000).toFixed(1)+"亿"
                }else if(num>=10000){
                    return (num/100000).toFixed(1)+"万"
                }
            }
        },
        mounted(){
            this.getGeDan()
        } */
        //#endregion
        // 使用vue3从后台获取数据
        setup(){
            const state=reactive({
                musicList:[]
            })
            function changeCount(num){
                if(num>=100000000){
                    return  (num/10000000).toFixed(1)+"亿"
                }else if(num>=10000){
                    return (num/100000).toFixed(1)+"万"
                }
            }
            onMounted(async()=>{
                let res=await getMusicList()
                // console.log(res)
                state.musicList=res.data.result
            })
            return {state,changeCount}
        }
    }
</script>
<style lang="less" scoped>
    .musicList{
        width: 100%;
        height: 5rem;
        padding: 0.1rem;
        .musicTop{
            width: 100%;
            height: 0.6rem;
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.2rem;
            .title{
                font-size: .4rem;
                font-weight: 900;
            }
            .more{
                border: 1px solid #ccc;
                text-align: center;
                line-height: 0.6rem;
                padding: 0 0.2rem;
                border-radius: 0.4rem;
            }
        }
        .MusicContent{
            width: 100%;
            height: 3.9rem;
            .my-swiper{
                height: 100%;
                .van-swipe-item{
                    padding:0 0.1rem;
                    position: relative;
                    img{
                    width: 100%;
                    height: 3rem;
                    border-radius: 0.2rem;
                    }
                    .playCount{
                        position: absolute;
                        color: #fff;
                        left: 1.3rem;
                        top: 0.1rem;
                        .icon{
                            fill: #fff;
                            // 设置文字和图标中线对齐
                            vertical-align: middle;
                        }
                        
                    }
                }
            }
        }
    }
</style>
